<template>
  <div class="app-container" style="background-color: #f1f3f7;">
    <section style="display: block;unicode-bidi: isolate;">
      <div style="display: table; line-height: 64px;
    width: 100%;
    height: 64px;
    background-color: #fff;
    box-shadow: 0 1px 9px 4px rgba(62, 62, 62, .05);
    border: 1px solid #ebebeb;
    box-sizing: border-box;">
        <el-row :gutter="20">
          <el-col :span="8">
            <div style="margin-left: 20px;">模板设计</div>
          </el-col>
          <!-- <el-col :span="8">
            <el-input placeholder="请输入模版名称" style="width: 220px;"><i class="el-icon-edit el-input__icon" slot="suffix">
              </i></el-input>
          </el-col> -->
          <el-col :span="16">
            <div style="float:right; margin-right:15px">
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button type="success" @click="submitFormSh" v-if="showshbt && state == ''">提交审核</el-button>
              <el-button plain @click="closePage">关闭</el-button>

            </div>
          </el-col>
        </el-row>
      </div>
    </section>

    <div class="flex-container">
      <div>
        <section class="left-panel">
          <section class="component-panel">
            <div class="suit-list">
              <div style="overflow: hidden; margin-bottom: 10px;">
                <p class="suit-title">模版类型</p>
                <div class="suite-item" @click="clickv(1)" :style="{ backgroundColor: selectleft == 1 ? bk : bk1 }">
                  <div class="suite-item-content">
                    <article class="card-content oneCss" slot="content">
                      <div
                        style="position: absolute; width: 100%; background-color: rgb(242, 242, 242); border-radius: 10px;">
                      </div>
                      <div class="transform" style="transform: scale(0.292398);">
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 52px; left: 0px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 192px; left: 0px; transform: rotate(0deg);">
                          <!---->
                          <div><img src="https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg.jpg"
                              alt="" style="height: 192px; width: 342px; border-radius: 0px;">
                            <div data-v-fc03bac0=""
                              ss="{&quot;x&quot;:0,&quot;locked&quot;:true,&quot;visible&quot;:true,&quot;active&quot;:false,&quot;y&quot;:0,&quot;type&quot;:&quot;image&quot;,&quot;src&quot;:&quot;https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg.jpg&quot;,&quot;proportion&quot;:[16,9],&quot;size&quot;:0,&quot;angle&quot;:0,&quot;event&quot;:{&quot;action&quot;:&quot;OPEN_URL&quot;,&quot;target&quot;:&quot;&quot;,&quot;merchantName&quot;:&quot;&quot;,&quot;packageNames&quot;:&quot;&quot;,&quot;floorUrl&quot;:&quot;&quot;,&quot;copyType&quot;:1,&quot;body&quot;:&quot;&quot;,&quot;subject&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;floorType&quot;:0,&quot;browserFloorUrl&quot;:&quot;&quot;,&quot;navType&quot;:2,&quot;latitude&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;,&quot;longitude&quot;:&quot;&quot;,&quot;txtButton&quot;:&quot;&quot;,&quot;mode&quot;:0},&quot;style&quot;:{&quot;borderStyle&quot;:&quot;none&quot;,&quot;borderRadius&quot;:0,&quot;borderWidth&quot;:0,&quot;padding&quot;:0},&quot;w&quot;:342,&quot;h&quot;:192,&quot;z&quot;:0,&quot;borderRadius&quot;:0,&quot;tag&quot;:&quot;图片1&quot;}"
                              s="true" class="srcParamSty" style="display: none;"></div>
                          </div>
                          <!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 16px; font-family: 微软雅黑; font-style: normal; font-weight: 700; text-decoration: none; line-height: 1.5; letter-spacing: 0px; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 213px; width: 300px; height: 26px; left: 18px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text" style="line-height: 1.5;">编辑文本，最多显示17个字</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 13px; font-family: 微软雅黑; font-style: normal; font-weight: normal; text-decoration: none; line-height: 1.5; letter-spacing: 0px; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 238px; width: 300px; height: 62px; left: 18px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text isSign" style="line-height: 1.5;">
                            编辑文本描述，最多显示69个字。编辑文本描述，最多显示69个字。编辑文本描述，最多显示69个字。</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 16px; font-family: 微软雅黑; font-style: normal; font-weight: normal; text-decoration: none; letter-spacing: 0px; color: rgb(255, 255, 255); text-align: center; background-color: rgb(0, 125, 255); opacity: 1; box-sizing: border-box; border-style: none; border-radius: 32px; border-width: 0px; padding: 0px; z-index: 3; top: 307px; width: 307px; height: 40px; left: 18px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!---->
                          <div type="button" class="btn" style="line-height: 40px; height: 40px; width: 307px;">编辑按钮</div>
                          <!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                      </div>
                      <p class="time" style="display: none;"> 2025-05-08 11:01:46 </p>
                    </article>
                  </div>
                  <div class="suite-item-title">图文</div>
                </div>
                <div class="suite-item" @click="clickv(2)" :style="{ backgroundColor: selectleft == 2 ? bk : bk1 }">
                  <div class="suite-item-content">
                    <article class="card-content oneCss" slot="content">
                      <div
                        style="position: absolute; width: 100%; background-color: rgb(242, 242, 242); border-radius: 10px;">
                      </div>
                      <div class="transform" style="transform: scale(0.292398);">
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 52px; left: 0px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 1; top: 0px; width: 342px; height: 193px; left: 0px; transform: rotate(0deg);">
                          <!----><!----><!---->
                          <div class="video-player" style="height: 193px;"><video src=""
                              poster="https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultVideo.jpg"
                              style="width: 342px; object-fit: cover;"></video><img
                              src=""
                              ondragstart="return false" alt="" class="play-btn"></div>
                          <!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 16px; font-family: 微软雅黑; font-style: normal; font-weight: 700; text-decoration: none; letter-spacing: 0px; line-height: 1.5; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 213px; width: 300px; height: 26px; left: 18px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text" style="line-height: 1.5;">编辑文本，最多显示17个字</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 13px; font-family: 微软雅黑; font-style: normal; font-weight: normal; text-decoration: none; line-height: 1.5; letter-spacing: 0px; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 238px; width: 300px; height: 62px; left: 18px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text isSign" style="line-height: 1.5;">
                            编辑文本描述，最多显示69个字。编辑文本描述，最多显示69个字。编辑文本描述，最多显示69个字。</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 16px; font-family: 微软雅黑; font-style: normal; font-weight: normal; text-decoration: none; letter-spacing: 0px; color: rgb(255, 255, 255); text-align: center; background-color: rgb(0, 125, 255); opacity: 1; box-sizing: border-box; border-style: none; border-radius: 32px; border-width: 0px; padding: 0px; z-index: 3; top: 307px; width: 307px; height: 40px; left: 18px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!---->
                          <div type="button" class="btn" style="line-height: 40px; height: 40px; width: 307px;">编辑按钮</div>
                          <!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                      </div>
                      <p class="time" style="display: none;"> 2025-05-08 11:18:32 </p>
                    </article>
                  </div>
                  <div class="suite-item-title">视频</div>
                </div>
                <div class="suite-item" @click="clickv(3)" :style="{ backgroundColor: selectleft == 3 ? bk : bk1 }">
                  <div class="suite-item-content">
                    <article class="card-content oneCss" slot="content">
                      <div
                        style="position: absolute; width: 100%; background-color: rgb(242, 242, 242); border-radius: 10px;">
                      </div>
                      <div class="transform" style="transform: scale(0.292398);">
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 456px; left: 0px; transform: rotate(0deg);">
                          <!---->
                          <div><img src="https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/redpacketBg2.png" alt=""
                              style="height: 456px; width: 342px; border-radius: 0px;">
                            <div data-v-fc03bac0=""
                              ss="{&quot;x&quot;:0,&quot;locked&quot;:true,&quot;visible&quot;:true,&quot;active&quot;:false,&quot;y&quot;:0,&quot;type&quot;:&quot;image&quot;,&quot;skipReplaceSrc&quot;:true,&quot;isBgimg&quot;:true,&quot;notValid&quot;:true,&quot;src&quot;:&quot;https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/redpacketBg2.png&quot;,&quot;size&quot;:0,&quot;angle&quot;:0,&quot;event&quot;:{&quot;action&quot;:&quot;OPEN_URL&quot;,&quot;target&quot;:&quot;&quot;,&quot;merchantName&quot;:&quot;&quot;,&quot;packageNames&quot;:&quot;&quot;,&quot;floorUrl&quot;:&quot;&quot;,&quot;copyType&quot;:1,&quot;body&quot;:&quot;&quot;,&quot;subject&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;floorType&quot;:0,&quot;browserFloorUrl&quot;:&quot;&quot;,&quot;navType&quot;:2,&quot;latitude&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;,&quot;longitude&quot;:&quot;&quot;,&quot;txtButton&quot;:&quot;&quot;,&quot;mode&quot;:0},&quot;style&quot;:{&quot;borderStyle&quot;:&quot;none&quot;,&quot;borderRadius&quot;:0,&quot;borderWidth&quot;:0,&quot;padding&quot;:0},&quot;w&quot;:342,&quot;h&quot;:456,&quot;z&quot;:0,&quot;borderRadius&quot;:0,&quot;tag&quot;:&quot;图片2&quot;}"
                              s="true" class="srcParamSty" style="display: none;"></div>
                          </div>
                          <!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; color: rgb(255, 255, 255); text-align: center; z-index: 0; top: 348px; width: 342px; height: 23px; left: 0px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="border-style: none; border-radius: 70px; border-width: 0px; padding: 0px; z-index: 0; top: 44px; width: 70px; height: 70px; left: 136px; transform: rotate(0deg);">
                          <!---->
                          <div><img src="https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg2.jpg"
                              alt="" style="height: 70px; width: 70px; border-radius: 70px;">
                            <div data-v-fc03bac0=""
                              ss="{&quot;x&quot;:136,&quot;locked&quot;:true,&quot;visible&quot;:true,&quot;active&quot;:false,&quot;y&quot;:44,&quot;type&quot;:&quot;image&quot;,&quot;src&quot;:&quot;https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg2.jpg&quot;,&quot;proportion&quot;:[1,1],&quot;oppobg&quot;:{&quot;src&quot;:&quot;https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/redpacketBg-oppo.jpg&quot;,&quot;proportion&quot;:[3,4],&quot;w&quot;:342,&quot;h&quot;:456},&quot;isBg&quot;:0,&quot;size&quot;:0,&quot;angle&quot;:0,&quot;event&quot;:{&quot;action&quot;:&quot;OPEN_URL&quot;,&quot;target&quot;:&quot;&quot;,&quot;merchantName&quot;:&quot;&quot;,&quot;packageNames&quot;:&quot;&quot;,&quot;floorUrl&quot;:&quot;&quot;,&quot;copyType&quot;:1,&quot;body&quot;:&quot;&quot;,&quot;subject&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;floorType&quot;:0,&quot;browserFloorUrl&quot;:&quot;&quot;,&quot;navType&quot;:2,&quot;latitude&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;,&quot;longitude&quot;:&quot;&quot;,&quot;txtButton&quot;:&quot;&quot;,&quot;mode&quot;:0},&quot;style&quot;:{&quot;borderStyle&quot;:&quot;none&quot;,&quot;borderRadius&quot;:&quot;70px&quot;,&quot;borderWidth&quot;:0,&quot;padding&quot;:0},&quot;w&quot;:70,&quot;h&quot;:70,&quot;z&quot;:0,&quot;borderRadius&quot;:0,&quot;tag&quot;:&quot;图片1&quot;}"
                              s="true" class="srcParamSty" style="display: none;"></div>
                          </div>
                          <!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 14px; font-family: 微软雅黑; font-style: normal; font-weight: 700; text-decoration: none; letter-spacing: 0px; line-height: 1.5; color: rgb(255, 255, 255); text-align: center; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 128px; width: 342px; height: 23px; left: 0px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text" style="line-height: 1.5;">编辑名称，最多显示18个字</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 24px; font-family: 微软雅黑; font-style: normal; font-weight: 700; text-decoration: none; letter-spacing: 0px; line-height: 1.5; color: rgb(255, 255, 255); text-align: center; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 196px; width: 342px; height: 40px; left: 0px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text" style="line-height: 1.5;">编辑文本，最多11个字</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 14px; font-family: 微软雅黑; font-style: normal; font-weight: 700; text-decoration: none; letter-spacing: 0px; line-height: 1.5; color: rgb(255, 255, 255); text-align: center; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 236px; width: 280px; height: 69px; left: 31px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text isSign" style="line-height: 1.5;">
                            编辑文本，最多显示54个字。编辑文本，最多显示54个字。编辑文本，最多显示54个字。</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 16px; font-family: 微软雅黑; font-style: normal; font-weight: normal; text-decoration: none; letter-spacing: 0px; color: rgb(255, 255, 255); text-align: center; background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 173, 71) 40%, rgb(255, 173, 71) 40%, rgb(255, 141, 22) 100%); opacity: 1; box-sizing: border-box; border-style: none; border-radius: 32px; border-width: 0px; padding: 0px; animation: initial; z-index: 3; top: 381px; width: 202px; height: 40px; left: 70px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!---->
                          <div type="button" class="btn" style="line-height: 40px; height: 40px; width: 202px;">立即领取</div>
                          <!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                      </div>
                      <p class="time" style="display: none;"> 2025-05-08 11:18:32 </p>
                    </article>
                  </div>
                  <div class="suite-item-title">红包</div>
                </div>
                <div class="suite-item" @click="clickv(4)" :style="{ backgroundColor: selectleft == 4 ? bk : bk1 }">
                  <div class="suite-item-content">
                    <article class="card-content oneCss" slot="content">
                      <div
                        style="position: absolute; width: 100%; background-color: rgb(242, 242, 242); border-radius: 10px;">
                      </div>
                      <div class="transform" style="transform: scale(0.292398);">
                        <section class="wrapper"
                          style="border-style: none; border-radius: 8px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 456px; left: 0px; transform: rotate(0deg);">
                          <!---->
                          <div><img src="https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg5.jpg"
                              alt="" style="height: 456px; width: 342px; border-radius: 8px;">
                            <div data-v-fc03bac0=""
                              ss="{&quot;x&quot;:0,&quot;locked&quot;:true,&quot;visible&quot;:true,&quot;active&quot;:false,&quot;buttomImg&quot;:true,&quot;y&quot;:0,&quot;type&quot;:&quot;image&quot;,&quot;src&quot;:&quot;https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg5.jpg&quot;,&quot;proportion&quot;:[3,4],&quot;size&quot;:0,&quot;angle&quot;:0,&quot;event&quot;:{&quot;action&quot;:&quot;OPEN_URL&quot;,&quot;target&quot;:&quot;&quot;,&quot;merchantName&quot;:&quot;&quot;,&quot;packageNames&quot;:&quot;&quot;,&quot;floorUrl&quot;:&quot;&quot;,&quot;copyType&quot;:1,&quot;body&quot;:&quot;&quot;,&quot;subject&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;floorType&quot;:0,&quot;browserFloorUrl&quot;:&quot;&quot;,&quot;navType&quot;:2,&quot;latitude&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;,&quot;longitude&quot;:&quot;&quot;,&quot;txtButton&quot;:&quot;&quot;,&quot;mode&quot;:0},&quot;style&quot;:{&quot;borderStyle&quot;:&quot;none&quot;,&quot;borderRadius&quot;:&quot;8px&quot;,&quot;borderWidth&quot;:0,&quot;padding&quot;:0},&quot;w&quot;:342,&quot;h&quot;:456,&quot;z&quot;:0,&quot;tag&quot;:&quot;图片38&quot;}"
                              s="true" class="srcParamSty" style="display: none;"></div>
                          </div>
                          <!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                      </div>
                      <p class="time" style="display: none;"> 2025-05-08 11:18:32 </p>
                    </article>
                  </div>
                  <div class="suite-item-title">海报</div>
                </div>
                <div class="suite-item" @click="clickv(5)" :style="{ backgroundColor: selectleft == 5 ? bk : bk1 }">
                  <div class="suite-item-content">
                    <article class="card-content oneCss" slot="content">
                      <div
                        style="position: absolute; width: 100%; background-color: rgb(242, 242, 242); border-radius: 10px;">
                      </div>
                      <div class="transform" style="transform: scale(0.292398);">
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 456px; left: 0px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                          <div data-v-ca6f58b6="" class="ECommerce">
                            <div data-v-ca6f58b6="" class="carousel el-carousel el-carousel--horizontal">
                              <div class="el-carousel__container"><!----><!---->
                                <div data-v-ca6f58b6="" class="el-carousel__item carousel-item is-active is-animating"
                                  style="transform: translateX(0px) scale(1);"><!---->
                                  <div><img
                                      src="https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg2.jpg"
                                      alt="" style="height: 456px; width: 342px; border-radius: 8px;">
                                    <div data-v-fc03bac0=""
                                      ss="{&quot;x&quot;:0,&quot;locked&quot;:true,&quot;visible&quot;:true,&quot;active&quot;:false,&quot;buttomImg&quot;:true,&quot;y&quot;:0,&quot;type&quot;:&quot;image&quot;,&quot;src&quot;:&quot;https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg5.jpg&quot;,&quot;proportion&quot;:[3,4],&quot;size&quot;:0,&quot;angle&quot;:0,&quot;event&quot;:{&quot;action&quot;:&quot;OPEN_URL&quot;,&quot;target&quot;:&quot;&quot;,&quot;merchantName&quot;:&quot;&quot;,&quot;packageNames&quot;:&quot;&quot;,&quot;floorUrl&quot;:&quot;&quot;,&quot;copyType&quot;:1,&quot;body&quot;:&quot;&quot;,&quot;subject&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;floorType&quot;:0,&quot;browserFloorUrl&quot;:&quot;&quot;,&quot;navType&quot;:2,&quot;latitude&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;,&quot;longitude&quot;:&quot;&quot;,&quot;txtButton&quot;:&quot;&quot;,&quot;mode&quot;:0},&quot;style&quot;:{&quot;borderStyle&quot;:&quot;none&quot;,&quot;borderRadius&quot;:&quot;8px&quot;,&quot;borderWidth&quot;:0,&quot;padding&quot;:0},&quot;w&quot;:342,&quot;h&quot;:456,&quot;z&quot;:0,&quot;tag&quot;:&quot;图片38&quot;}"
                                      s="true" class="srcParamSty" style="display: none;"></div>
                                  </div>
                                </div>
                              </div>
                              <ul class="el-carousel__indicators el-carousel__indicators--horizontal">
                                <li class="el-carousel__indicator el-carousel__indicator--horizontal is-active"><button
                                    class="el-carousel__button"><!----></button></li>
                              </ul>
                            </div><!---->
                            <div data-v-ca6f58b6="" class="price"><span data-v-ca6f58b6=""
                                class="price_symbol">¥</span><span data-v-ca6f58b6="" class="price_real">文本</span><span
                                data-v-ca6f58b6="" class="price_favorable"
                                style="background-color: rgb(232, 64, 38);">文本</span></div>
                            <div data-v-ca6f58b6="" class="divTitle">编辑文本，最多显示17个字</div>

                          </div><!----><!----><!----><!----><!---->
                        </section>
                      </div>
                      <p class="time" style="display: none;"> 2025-05-16 13:44:38 </p>
                    </article>
                  </div>
                  <div class="suite-item-title">电商</div>
                </div>
                <div class="suite-item" @click="clickv(6)" :style="{ backgroundColor: selectleft == 6 ? bk : bk1 }">
                  <div class="suite-item-content">
                    <article class="card-content oneCss" slot="content">
                      <div
                        style="position: absolute; width: 100%; background-color: rgb(242, 242, 242); border-radius: 10px;">
                      </div>
                      <div class="transform" style="transform: scale(0.292398);">
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 52px; left: 0px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="border-style: none; border-radius: 0px; border-width: 0px; padding: 0px; z-index: 0; top: 0px; width: 342px; height: 192px; left: 0px; transform: rotate(0deg);">
                          <!---->
                          <div><img src="https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg.jpg"
                              alt="" style="height: 192px; width: 342px; border-radius: 0px;">
                            <div data-v-fc03bac0=""
                              ss="{&quot;x&quot;:0,&quot;locked&quot;:true,&quot;visible&quot;:true,&quot;active&quot;:false,&quot;y&quot;:0,&quot;type&quot;:&quot;image&quot;,&quot;src&quot;:&quot;https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg.jpg&quot;,&quot;proportion&quot;:[16,9],&quot;size&quot;:0,&quot;angle&quot;:0,&quot;event&quot;:{&quot;action&quot;:&quot;OPEN_URL&quot;,&quot;target&quot;:&quot;&quot;,&quot;merchantName&quot;:&quot;&quot;,&quot;packageNames&quot;:&quot;&quot;,&quot;floorUrl&quot;:&quot;&quot;,&quot;copyType&quot;:1,&quot;body&quot;:&quot;&quot;,&quot;subject&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;floorType&quot;:0,&quot;browserFloorUrl&quot;:&quot;&quot;,&quot;navType&quot;:2,&quot;latitude&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;,&quot;longitude&quot;:&quot;&quot;,&quot;txtButton&quot;:&quot;&quot;,&quot;mode&quot;:0},&quot;style&quot;:{&quot;borderStyle&quot;:&quot;none&quot;,&quot;borderRadius&quot;:0,&quot;borderWidth&quot;:0,&quot;padding&quot;:0},&quot;w&quot;:342,&quot;h&quot;:192,&quot;z&quot;:0,&quot;borderRadius&quot;:0,&quot;tag&quot;:&quot;图片1&quot;}"
                              s="true" class="srcParamSty" style="display: none;"></div>
                          </div>
                          <!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 16px; font-family: 微软雅黑; font-style: normal; font-weight: 700; text-decoration: none; line-height: 1.5; letter-spacing: 0px; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 213px; width: 300px; height: 26px; left: 18px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text" style="line-height: 1.5;">编辑文本，最多显示17个字</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 13px; font-family: 微软雅黑; font-style: normal; font-weight: normal; text-decoration: none; line-height: 1.5; letter-spacing: 0px; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1; box-sizing: border-box; z-index: 2; top: 238px; width: 300px; height: 62px; left: 18px; transform: rotate(0deg);">
                          <div contenteditable="true" class="rich-text isSign" style="line-height: 1.5;">
                            编辑文本描述，最多显示69个字。编辑文本描述，最多显示69个字。编辑文本描述，最多显示69个字。</div>
                          <!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                        <section class="wrapper"
                          style="font-size: 16px; font-family: 微软雅黑; font-style: normal; font-weight: normal; text-decoration: none; letter-spacing: 0px; color: rgb(255, 255, 255); text-align: center; background-color: rgb(0, 125, 255); opacity: 1; box-sizing: border-box; border-style: none; border-radius: 32px; border-width: 0px; padding: 0px; z-index: 3; top: 307px; width: 307px; height: 40px; left: 18px; transform: rotate(0deg);">
                          <!----><!----><!----><!----><!----><!----><label><!----></label><!----><label><!----></label><label><!----></label><!----><!----><!---->
                          <div type="button" class="btn" style="line-height: 40px; height: 40px; width: 307px;">编辑按钮</div>
                          <!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!---->
                        </section>
                      </div>
                      <p class="time" style="display: none;"> 2025-05-08 11:01:46 </p>
                    </article>
                  </div>
                  <div class="suite-item-title">轮播图片</div>
                </div>
              </div>
            </div>

          </section>
        </section>
      </div>

      <div class="center-div">
        <div v-if="tw" v-loading="loading">
          <div class="top-class" align="center">
            <div align="left">
              <div style="line-height: 42px; float: left;">适用于：</div>
              <div style="line-height: 42px; float: left; letter-spacing: 5px;" class="manufacturer-icons">
                <svg-icon icon-class="huaiwei" class="manufacturer-icon" />
                <svg-icon icon-class="honor" class="manufacturer-icon" />
                <svg-icon icon-class="xiaomiicon" class="manufacturer-icon" />
                <svg-icon icon-class="vivo" class="manufacturer-icon" />
                <svg-icon icon-class="oppo" class="manufacturer-icon" />
                <svg-icon icon-class="sanxing" class="manufacturer-icon" />
                <!-- <svg-icon icon-class="中兴" class="manufacturer-icon" /> -->
              </div>
            </div>
          </div>
          <div style="    margin-left: auto;margin-right: auto;width: 342px; height: 32px; font-size: 14px;color: red;" align="center">
            <div align="left">
              <div style="line-height: 32px; float: left;">图片尺寸：</div>
              <div style="line-height: 32px; float: left; " >
                1088px * 612px
              </div>
            </div>
          </div>
          <div style="margin-left: auto; margin-right: auto;" align="center">
            <!-- <image-preview :src="smsimage" :width="342" :height="192"  /> -->
            <el-image :src="baseUrl + smsimage" style="width: 342px; height:192px;" v-if="urllx == '1'" />
            <el-image :src="smsimage" style="width: 342px; height:192px;" v-if="urllx == '2'" />

          </div>
          <div style="margin-left: auto; margin-right: auto; width: 342px;   background-color: white;">
            <div style="height: 42px;" align="left">
              <div style="margin-left: 20px;padding-top: 20px;font-weight: bold;font-size: 14px;">
                {{ smstitle }}
              </div>
            </div>
            <div
              style="margin-left: auto; margin-right: auto; width: 342px; height: 152px;background-color: white;padding-top: 10px;"
              align="left">
              <div style="float:left;width: 322px; margin-left: 13px; ">
                <div style="width: 70px;float: left;color:#faad3a;">【签名】</div>
                <div style="float:left;width: 230px;font-size: 14px;"> {{ smscontent }}</div>
              </div>
            </div>
            <div align="center">
              <el-button type="primary" size="medium " style="margin-bottom: 10px;">{{ titlebt }}</el-button>
            </div>
          </div>
        </div>
        <div v-if="sp" v-loading="loading">
          <div class="top-class" align="center">
            <div style="line-height: 42px; float: left;">适用于：</div>
            <div style="line-height: 42px; float: left; letter-spacing: 5px;" class="manufacturer-icons">
              <svg-icon icon-class="huaiwei" class="manufacturer-icon" />
              <!-- <svg-icon icon-class="honor" class="manufacturer-icon" /> -->
              <!-- <svg-icon icon-class="xiaomiicon" class="manufacturer-icon" /> -->
              <svg-icon icon-class="vivo" class="manufacturer-icon" />
              <svg-icon icon-class="oppo" class="manufacturer-icon" />
              <svg-icon icon-class="sanxing" class="manufacturer-icon" />
              <svg-icon icon-class="中兴" class="manufacturer-icon" />
            </div>
          </div>
          <div style="margin-left: auto; margin-right: auto;" align="center">
            <!-- <image-preview :src="smsimage" :width="342" :height="192" /> -->
            <video-preview :videoSrc="baseUrl + smsimage" style="width: 342px;height: 192px;"
              v-if="urllx == '1'"></video-preview>
            <video-preview :videoSrc="smsimage" style="width: 342px;height: 192px;" v-if="urllx == '2'"></video-preview>
          </div>
          <div style="margin-left: auto; margin-right: auto; width: 342px;   background-color: white;">
            <div style="height: 42px;" align="left">
              <div style="margin-left: 20px;padding-top: 20px;font-weight: bold;font-size: 14px;">
                {{ smstitle }}
              </div>
            </div>
            <div
              style="margin-left: auto; margin-right: auto; width: 342px; height: 152px;background-color: white;padding-top: 10px;"
              align="left">
              <div style="float:left;width: 322px; margin-left: 13px; ">
                <div style="width: 70px;float: left;color:#faad3a;">【签名】</div>
                <div style="float:left;width: 230px;font-size: 14px;"> {{ smscontent }}</div>
              </div>
            </div>
            <div align="center">
              <el-button type="primary" size="medium " style="margin-bottom: 10px;">{{ titlebt }}</el-button>
            </div>
          </div>
        </div>
        <div v-if="hb" v-loading="loading">
          <div class="top-class" align="center">
            <div style="line-height: 42px; float: left;">适用于：</div>
            <div style="line-height: 42px; float: left; letter-spacing: 5px;" class="manufacturer-icons">
              <svg-icon icon-class="huaiwei" class="manufacturer-icon" />
              <svg-icon icon-class="honor" class="manufacturer-icon" />
              <svg-icon icon-class="xiaomiicon" class="manufacturer-icon" />
              <svg-icon icon-class="vivo" class="manufacturer-icon" />
              <svg-icon icon-class="oppo" class="manufacturer-icon" />
              <svg-icon icon-class="sanxing" class="manufacturer-icon" />
              <!-- <svg-icon icon-class="中兴" class="manufacturer-icon" /> -->
            </div>
          </div>
          <div style="    margin-left: auto;margin-right: auto;width: 342px; height: 32px; font-size: 14px;color: red;" align="center">
            <div align="left">
              <div style="line-height: 32px; float: left;">图片尺寸：</div>
              <div style="line-height: 32px; float: left; " >
                320px * 320px
              </div>
            </div>
          </div>
          <div style="margin-left: auto; margin-right: auto; width: 340px; height: 453px;border-radius: 10px;background-repeat: no-repeat; background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
                    background-position: center 0;" class="hbimage" align="center">
            <el-image :src="baseUrl + smsimage" style="width: 68px; height: 68px;border-radius: 70px;margin-top: 60px;"
              v-if="urllx == '1'" />
            <el-image :src="smsimage" style="width: 68px; height:68px;border-radius: 70px;margin-top: 60px;"
              v-if="urllx == '2'" />

            <div style="margin-left: auto; margin-right: auto; width: 342px;   color: white;font-weight: bold;">
              <div style=" padding-top: 10px;font-weight: bold;font-size: 15px;">
                {{ hbtitle }}
              </div>
              <div style="height: 42px;">
                <div style=" padding-top: 20px;font-weight: bold;font-size: 18px;">
                  {{ smstitle }}
                </div>
              </div>
              <div style="margin-left: auto; margin-right: auto; width: 342px; height: 152px; padding-top: 20px;"
                align="left">
                <div style="float:left;width: 322px; margin-left: 13px; ">
                  <div style="width: 70px;float: left;color:#faad3a;">【签名】</div>
                  <div style="float:left;width: 230px;font-size: 14px;"> {{ smscontent }}</div>
                </div>
              </div>
              <div align="center">
                <el-button type="warning" round style="margin-bottom: 10px;" size="medium ">{{ titlebt }}</el-button>

              </div>
            </div>
          </div>

        </div>
        <div v-if="hba" v-loading="loading">
          <div class="top-class" align="center">
            <div style="line-height: 42px; float: left;">适用于：</div>
            <div style="line-height: 42px; float: left; letter-spacing: 5px;" class="manufacturer-icons">
              <svg-icon icon-class="huaiwei" class="manufacturer-icon" />

            </div>
          </div>
          <div style="    margin-left: auto;margin-right: auto;width: 342px; height: 32px; font-size: 14px;color: red;" align="center">
            <div align="left">
              <div style="line-height: 32px; float: left;">图片尺寸：</div>
              <div style="line-height: 32px; float: left; " >
                816px * 1088px
              </div>
            </div>
          </div>
          <div style="margin-left: auto; margin-right: auto;" align="center">
            <el-image :src="baseUrl + smsimage" style="width: 340px; height: 453px;" v-if="urllx == '1'" />
            <el-image :src="smsimage" style="width: 340px; height:453px;" v-if="urllx == '2'" />
            <!-- <image-preview :src="smsimage" :width="342" :height="192" /> -->
          </div>
        </div>
        <div v-if="ds" v-loading="loading">
          <div class="top-class" align="center">
            <div style="line-height: 42px; float: left;">适用于：</div>
            <div style="line-height: 42px; float: left; letter-spacing: 5px;" class="manufacturer-icons">
              <svg-icon icon-class="huaiwei" class="manufacturer-icon" />
              <svg-icon icon-class="honor" class="manufacturer-icon" />
              <!-- <svg-icon icon-class="xiaomiicon" class="manufacturer-icon" /> -->
              <svg-icon icon-class="vivo" class="manufacturer-icon" />
              <svg-icon icon-class="oppo" class="manufacturer-icon" />
              <svg-icon icon-class="sanxing" class="manufacturer-icon" />
              <!-- <svg-icon icon-class="中兴" class="manufacturer-icon" /> -->
            </div>
          </div>
          <div style="margin-left: auto; margin-right: auto;" align="center">
            <!-- <image-preview :src="smsimage" :width="342" :height="252" /> -->
            <video-preview :videoSrc="baseUrl + smsimage" style="width: 342px;height: 192px;"
              v-if="urllx == '1'"></video-preview>
            <video-preview :videoSrc="smsimage" style="width: 342px;height: 192px;" v-if="urllx == '2'"></video-preview>
          </div>
          <div style="margin-left: auto; margin-right: auto; width: 342px;   background-color: white;">
            <div style="height: 42px;" align="left">
              <div style="margin-left: 20px;padding-top: 20px;font-weight: bold;font-size: 14px;">
                <div style="float:left;color:red">{{ smsjg }}</div>
                <div style="float:left;background-color: red;color: white; margin-left: 5px;"> {{ smsbq }}</div>
              </div>
            </div>
            <div style="height: 42px;" align="left">
              <div style="margin-left: 20px;padding-top: 20px;font-weight: bold;font-size: 14px;">
                <div style="  font-weight: bold;font-size: 15px;">
                  {{ smstitle }}
                </div>
              </div>
            </div>
            <div
              style="margin-left: auto; margin-right: auto; width: 342px; height: 102px;background-color: white;padding-top: 10px;"
              align="left">
              <div style="float:left;width: 322px; margin-left: 13px; ">
                <div style="width: 70px;float: left;color:#faad3a;">【签名】</div>
                <div style="float:left;width: 230px;font-size: 14px;"> {{ smscontent }}</div>
              </div>
            </div>
            <div align="center">
              <el-button type="warning" size="medium " round style="margin-bottom: 10px;">{{ titlebt }}</el-button>
              <el-button type="danger" size="medium " round style="margin-bottom: 10px;">{{ titlebt1 }}</el-button>
            </div>
          </div>
        </div>
        <div v-if="lb" v-loading="loading">
          <div class="top-class" align="center">
            <div align="left">
              <div style="line-height: 42px; float: left;">适用于：</div>
              <div style="line-height: 42px; float: left; letter-spacing: 5px;" class="manufacturer-icons">
                <svg-icon icon-class="huaiwei" class="manufacturer-icon" />
                <svg-icon icon-class="honor" class="manufacturer-icon" />
                <!-- <svg-icon icon-class="xiaomiicon" class="manufacturer-icon" /> -->
                <svg-icon icon-class="vivo" class="manufacturer-icon" />
                <svg-icon icon-class="oppo" class="manufacturer-icon" />
                <svg-icon icon-class="sanxing" class="manufacturer-icon" />
                <!-- <svg-icon icon-class="中兴" class="manufacturer-icon" /> -->
              </div>
            </div>
          </div>
          <div style="    margin-left: auto;margin-right: auto;width: 342px; height: 32px; font-size: 14px;color: red;" align="center">
            <div align="left">
              <div style="line-height: 32px; float: left;">图片尺寸：</div>
              <div style="line-height: 32px; float: left; "  v-if="lbval=='com.hbm.carouselImageSixteenToNine'">
                1088px * 612px(16:9)
              </div>
              <div style="line-height: 32px; float: left; "  v-if="lbval=='com.hbm.carouselQuareImage'">
                1088px * 1088px(1:1)
              </div>
              <div style="line-height: 32px; float: left; "  v-if="lbval=='com.hbm.carouselVerticalImage'">
                960px * 1300px(48:65)
              </div>
            </div>
          </div>
          <div style="margin-left: auto; margin-right: auto;" align="center">
            <!-- <image-preview :src="smsimage" :width="342" :height="192"  /> -->

            <div style="width: 342px;">
              <el-carousel trigger="click" :height="lbh">
                <el-carousel-item v-for="item in lbslshow" :key="item">
                  <el-image :src="baseUrl + lbimage[item]" style="width: 342px; height:100%;" v-if="urllx == '1'" />
                  <el-image :src="lbimage[item]" style="width: 342px; height:100%;" v-if="urllx == '2'" />
                </el-carousel-item>
              </el-carousel>
            </div>

          </div>
          <div style="margin-left: auto; margin-right: auto; width: 342px;   background-color: white;">
            <div style="height: 42px;" align="left">
              <div style="margin-left: 20px;padding-top: 20px;font-weight: bold;font-size: 14px;">
                {{ smstitle }}
              </div>
            </div>
            <div
              style="margin-left: auto; margin-right: auto; width: 342px; height: 152px;background-color: white;padding-top: 10px;"
              align="left">
              <div style="float:left;width: 322px; margin-left: 13px; ">
                <div style="width: 70px;float: left;color:#faad3a;">【签名】</div>
                <div style="float:left;width: 230px;font-size: 14px;"> {{ smscontent }}</div>
              </div>
            </div>
            <div align="center">
              <el-button type="primary" size="medium " style="margin-bottom: 10px;">{{ titlebt }}</el-button>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 450px;">
        <el-card class="box-card" style="width: 450px;height: 100%;">
          <div slot="header" class="clearfix">
            <span>内容设置</span>
          </div>
          <div style="margin-left: auto; margin-right: auto;" prop="smsimage" align="center">

            <file-upload v-model="smsimage" :fileType="['mp4']" :fileSize="20"
              v-if="(selectleft == 2 || selectleft == 5) && urllx == '1'" />
            <image-upload v-model="smsimage" :limit=1 :fileSize="2"
              v-if="selectleft != 2 && selectleft != 5 && selectleft != 6 && urllx == '1'" />
            <div style="align:left;text-align: left;" v-if="lbshow">
              样式选择：
              <el-radio-group v-model="lbval" @change="handleChange">
                <el-radio label="com.hbm.carouselImageSixteenToNine">16:9</el-radio>
                <el-radio label="com.hbm.carouselQuareImage">1:1</el-radio>
                <el-radio label="com.hbm.carouselVerticalImage">48:65</el-radio>
              </el-radio-group>
              <div style=" margin-top: 20px;  ">
                <el-button @click="lbdel" :disabled="lbslshow < 2" style="margin-right: 10px;">-</el-button>
                <el-radio-group v-model="lbsl">
                  <el-radio-button v-for="item in lbslshow" :label="item">
                  </el-radio-button>
                </el-radio-group>
                <el-button @click="lbadd" :disabled="lbslshow > 4" style="margin-left: 10px;">+</el-button>
              </div>
              <div align="center" style="margin-top: 20px;">
                <image-upload width="300px" v-if="lbsl == item" v-for="item in lbslshow" :key="item" :fileSize="2"
                  v-model="lbimage[item]" style="width:300px !important" :limit=1>
                </image-upload>
              </div>
            </div>
          </div>

          <div style="width: 100%;" align="center" v-if="false">
            <!-- <el-button type="primary">选择图片</el-button> -->
            <!-- <el-button type="success">插入参数</el-button> -->
            <div style="margin-top: 10px;">
              <el-radio v-model="urllx" label="1">本地上传</el-radio>
              <el-radio v-model="urllx" label="2">网络资源</el-radio>
              <el-form label-width="50px" label-position="top" class="demo-ruleForm" align="left">
                <el-form-item label="网络地址" prop="smsimage" v-if="urllx == '2'">
                  <el-input v-model="smsimage" type="textarea" @input="handleInput" rows="5" />
                </el-form-item>
              </el-form>
            </div>
          </div>
          <el-divider></el-divider>
          <el-form label-width="50px" label-position="top" class="demo-ruleForm">
            <el-form-item label="红包名称" prop="hbtitle" v-if="hbtitlev">
              <el-input v-model="hbtitle" maxlength="17" show-word-limit />
            </el-form-item>
            <el-form-item label="编辑价格" prop="smsjg" v-if="smsjgv">
              <el-input v-model="smsjg" maxlength="17" show-word-limit />
            </el-form-item>
            <el-form-item label="编辑标签" prop="smsbq" v-if="smsbqv">
              <el-input v-model="smsbq" maxlength="17" show-word-limit />
            </el-form-item>
            <el-form-item label="标题名称" prop="smstitle" v-if="smstitlev">
              <el-input v-model="smstitle" maxlength="17" show-word-limit />
            </el-form-item>
            <el-form-item label="内容信息" prop="smscontent" v-if="smscontentv">
              <el-input type="textarea" v-model="smscontent" maxlength="60" show-word-limit />
            </el-form-item>
            <div><span style="color: red;">跳转小程序请使用‘打开链接’</span></div>
            <el-form-item label="按钮标题" prop="titlebt" v-if="titlebtv">
              <el-input maxlength="6" v-model="titlebt" show-word-limit />
            </el-form-item>
            <el-form-item label="打开类型" prop="dklx" v-if="false">
              <el-radio v-model="dklx" label="1">打开链接</el-radio>
              <el-radio v-model="dklx" label="2">打开弹窗</el-radio>
            </el-form-item>
            <el-form-item label="链接" prop="bturl" v-if="bturlv">
              <el-input type="textarea" placeholder="https://开头，字符长度<=3000" v-model="bturl" />
            </el-form-item>
            <el-form-item label="按钮标题" prop="titlebt1" v-if="titlebt1v">
              <el-input maxlength="6" v-model="titlebt1" show-word-limit />
            </el-form-item>
            <el-form-item label="链接" prop="bturl1" v-if="bturl1v">
              <el-input type="textarea" placeholder="https://开头，字符长度<=3000" v-model="bturl1" />
            </el-form-item>

          </el-form>
          <el-col :span="24" align="center">
            <!-- <el-button type="primary" v-model="smsmodel.bturl" style="margin-bottom: 20px;">保 存</el-button> -->
          </el-col>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import VideoPreview from '@/views/smstask/SmsView/video.vue';
import { listSmsTemplateMms,updateSmsTemplateMmsSh, changeHtStatus } from "@/api/Sms/SmsTemplateMms";
import { listSmsTemplateMmsItem, getSmsTemplateMmsItem, delSmsTemplateMmsItem, addSmsTemplateMmsItem, updateSmsTemplateMmsItem, getmore } from "@/api/Sms/SmsTemplateMmsItem";
export default {
  name: "SmsView",
  components: {
    VideoPreview
  },
  data() {
    return {
      //videoUrl: 'https://upos-sz-mirrorali.bilivideo.com/upgcxcode/84/96/334319684/334319684-1-208.mp4?e=ig8euxZM2rNcNbhM7wdVhwdlhzKMhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1747659321&gen=playurlv2&os=alibv&oi=2018263300&trid=1c8196d6a9cf4f1a90dd5898146ce4a2T&mid=3546883406432665&platform=html5&og=cos&upsig=b92e5d7dca2f755db242b009bdb55d4d&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform,og&bvc=vod&nettype=0&bw=344234&orderid=0,1&buvid=&build=0&mobi_app=&f=T_0_0&logo=80000000',
      bk: 'rgb(208 215 220)',//左侧选中样式
      bk1: '#f8f8fa',
      //左侧选中值
      selectleft: null,
      //审核按钮
      showshbt: false,
      state: '',//模版审核状态，为空时显示审核按钮

      // 遮罩层
      loading: true,
      baseUrl: process.env.VUE_APP_BASE_API,

      // 模版编辑表格数据
      SmsTemplateMmsItemList: [],
      tw: true,
      sp: false,
      hb: false,
      hba: false,
      ds: false,
      lb: false,

      //对应控件显示
      smstitlev: true,//标题
      hbtitlev: true,//红包标题
      smscontentv: true,//内容
      titlebtv: false,//按钮标题
      bturlv: true, //跳转路径
      titlebt1v: false,//按钮1标题
      bturl1v: true,//跳转路径1
      smsbqv: false,
      smsjgv: false,
      smsurllxv: false,
      lbshow: false,

      queryParams: {
        tmId: null,
        cardId: null,
      },
      //传到后端值
      tablejson: {
        other5: null,
        other4: null,//手机厂商
      },

      //控件初始值
      lbval: 'com.hbm.carouselImageSixteenToNine',//轮播图样式
      lbsl: 1,//轮播数量
      lbslshow: 1,//轮播数量
      lbimage: [],//轮播图片
      lbh: '192px',

      smsimage: null,
      smstitle: null,
      hbtitle: null,//红包标题
      smscontent: null,
      titlebt: null,
      bturl: null,
      titlebt1: null,
      bturl1: null,
      smsbq: null,//电商标签
      smsjg: null,//电商价格

      tmId: null,//传进来的主表id
      finfo: "HuaWei",
      mtype: 1,//模版类型
      mlx: 1,//1添加，2修改
      urllx: '1',//图片视频类型，1表示本地上传，2表示网络链接
      dklx: '1',//打开链接，打开弹窗
      // smsimage: "https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/defaultImg/defaultImg.jpg"
    };
  },
  computed: {
    boxStyle() {
      return {
        border: `${this.borderWidth} ${this.borderStyle} ${this.borderColor}`
      };
    },
    boxStylex() {
      return {
        border: `${this.borderWidthx} ${this.borderStyle} ${this.borderColor}`
      };
    }
  },
  created() {
    if (this.$route.query.tmId != undefined) {
      this.tmId = this.$route.query.tmId;
      this.resttitle();
      //去获取这个对应的数据信息-查询是否有子表，得cardid赋值
      // this.getList();
      this.loading = false;
      this.queryParams.tmId = this.tmId;
      this.queryParams.userId = this.$store.state.user.userId;
      //查询审核状态
      listSmsTemplateMms(this.queryParams).then(response => {
        if (Object.keys(response.rows).length != 0) {
          this.state = response.rows[0]["auditState"];
        }
      });

      listSmsTemplateMmsItem(this.queryParams).then(response => {
        this.SmsTemplateMmsItemList = response.rows;

        //表示新增
        if (Object.keys(response.rows).length === 0) {
          this.queryParams.cardId = "com.hbm.imageandtext";
          this.clickv(1);

        }
        else {
          this.showshbt = true;
          let ctype = response.rows[0]["cardId"];
          if (ctype == "com.hbm.imageandtext") {
            this.clickv(1);

          }
          if (ctype == "com.hbm.video") {
            this.clickv(2);

          }
          if (ctype == "com.hbm.redpacket") {
            this.clickv(3);

          }
          if (ctype == "com.hbm.simplePoster.v2") {
            this.clickv(4);

          }
          if (ctype == "com.hbm.ecImageAndText") {
            this.clickv(5);

          }
          if (ctype == "com.hbm.carouselImageSixteenToNine" || ctype == "com.hbm.carouselQuareImage" || ctype == "com.hbm.carouselVerticalImage") {
            this.clickv(6);
          }
        }

      });
    }
    else {
      this.$modal.confirm('参数异常').then(function () {
        window.close();
      }).then(() => {
        window.close();
      }).catch(() => { });
    }
  },
  methods: {
    handleChange(value) {

      if (this.lbval == "com.hbm.carouselImageSixteenToNine") {
        this.lbh = '192px';
      }
      if (this.lbval == "com.hbm.carouselQuareImage") {
        this.lbh = '342px';
      }
      if (this.lbval == "com.hbm.carouselVerticalImage") {
        this.lbh = '450px';
      }

    },

    lbadd() {
      this.lbslshow = this.lbslshow + 1;
    },
    lbdel() {
      this.lbimage.splice(this.lbslshow, 1); //删除最后一个
      this.lbslshow = this.lbslshow - 1;
      this.lbsl = 1;//选中第一个
      console.log(this.lbimage)
    },

    handleInput(event) {
      // 使用正则表达式移除逗号
      if (event.includes(',')) {
        this.smsimage = event.replace(/,/g, '');
        alert('地址中不允许有逗号！')
      }
    },
    resttitle() {
      this.smsimage = null
      this.smstitle = "编辑文本，最多显示17个字"
      this.hbtitle = "编辑名称，最多显示18个字"
      this.smscontent = "编辑文本描述，最多显示69个字,拒收请回复R。"
      this.titlebt = "点击查看"
      this.bturl = null
      this.titlebt1 = "编辑按钮"
      this.bturl1 = null
      this.smsjg = "¥文本"
      this.smsbq = "文本"

    },
    getList() {
      this.loading = true;
      this.queryParams.tmId = this.tmId;
      this.queryParams.userId = this.$store.state.user.userId;
      listSmsTemplateMmsItem(this.queryParams).then(response => {
        this.SmsTemplateMmsItemList = response.rows;

        if (Object.keys(response.rows).length === 0) {
          this.urllx = "1";
          this.dklx = "1";
        }

        this.SmsTemplateMmsItemList.forEach(element => {
          //红包名
          if (element.type == 'hbtitle') {
            this.hbtitle = element.value;
          }
          if (element.type == 'title') {
            this.smstitle = element.value;
          }
          if (element.type == 'nr') {
            this.smscontent = element.value;
          }
          if (element.type == 'tp1') {
            this.smsimage = element.value;
            this.urllx = element.urlLx;
          }
          if (element.type == 'bttitle') {
            this.titlebt = element.value;
          }
          if (element.type == 'bturl') {
            this.bturl = element.value;
          }
          if (element.type == 'bttitle1') {
            this.titlebt1 = element.value;
          }
          if (element.type == 'bturl1') {
            this.bturl1 = element.value;
          }
          if (element.type == 'jg') {
            this.smsjg = element.value;
          }
          if (element.type == 'bq') {
            this.smsbq = element.value;
          }
          if (element.type == 'lbimage') {
            if (element.value != null) {
              this.lbimage = element.value.split(',');
              this.lbimage.unshift(null);// 要

              this.lbslshow = this.lbimage.length - 1; //这里不减会出不来第一个
            }
          }

          this.lbval = element.cardId;
          if (this.lbval == "com.hbm.carouselImageSixteenToNine") {
            this.lbh = '192px';
          }
          if (this.lbval == "com.hbm.carouselQuareImage") {
            this.lbh = '342px';
          }
          if (this.lbval == "com.hbm.carouselVerticalImage") {
            this.lbh = '450px';
          }

          this.queryParams.cardId = element.cardId;
        });
        this.loading = false;
      });
    },
    clickv(v) {
      this.selectleft = v;
      //判断有没有数据，是否给默认图片
      this.resttitle();

      this.tw = false;//图文
      this.sp = false;//视频
      this.hb = false;//红包
      this.hba = false;//海报
      this.ds = false;//电商
      this.lb = false;//轮播

      //显示编辑控件
      this.hbtitlev = false;
      this.smstitlev = true;
      this.smscontentv = true;
      this.titlebtv = true;
      this.bturlv = true;
      this.titlebt1v = false;//电商按钮
      this.bturl1v = false;//电商按钮链接
      this.smsjgv = false;
      this.smsbqv = false;
      this.lbshow = false;

      if (v == 1) {
        this.tw = true
        this.finfo = "HuaWei,HONOR,XIAOMI,VIVO,OPPO,SAMSUNG";
        this.queryParams.cardId = "com.hbm.imageandtext";
      }
      if (v == 2) {
        this.sp = true
        this.finfo = "HuaWei,HONOR,VIVO,OPPO,SAMSUNG";
        this.queryParams.cardId = "com.hbm.video";
      }
      if (v == 3) {
        this.queryParams.cardId = "com.hbm.redpacket";
        this.finfo = "HuaWei";
        // this.smsimage = "/profile/upload/2025/05/16/hba_20250516103457A006.jpg"
        this.hb = true
        this.hbtitlev = true
      }
      if (v == 4) {
        this.queryParams.cardId = "com.hbm.simplePoster.v2";
        this.finfo = "HuaWei,HONOR,XIAOMI,VIVO,OPPO,SAMSUNG";
        // this.smsimage = "/profile/upload/2025/05/16/hba_20250516103457A006.jpg"
        this.hba = true

        this.smstitlev = false
        this.hbtitlev = false
        this.smscontentv = false
        this.titlebtv = false
        this.bturlv = true
      }
      if (v == 5) {
        this.queryParams.cardId = "com.hbm.ecImageAndText";
        this.finfo = "HuaWei";
        this.ds = true
        this.smsjgv = true
        this.smsbqv = true
        this.titlebt1v = true//电商按钮
        this.bturl1v = true//电商按钮链接
      }
      if (v == 6) {
        //轮播图
        this.lb = true
        this.lbshow = true
        this.finfo = "HuaWei,HONOR,VIVO,OPPO,SAMSUNG";

      }
      this.getList();
    },
    closePage() {
      this.$modal.confirm('是否确认关闭当前页面？').then(function () {
        window.close();
      }).then(() => {

      }).catch(() => { });
    },
    submitForm() {
      this.tablelist = [];

      // console.log(this.queryParams.cardId)
      //设置保存项 图文

      if (this.selectleft == "6") {
        //轮播图时，单独设置
        this.queryParams.cardId = this.lbval;
      }

      this.reset();
      this.smsmodel.type = 'hbtitle';
      this.smsmodel.value = this.hbtitle;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);

      this.reset();
      this.smsmodel.type = 'title';
      this.smsmodel.value = this.smstitle;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);

      this.reset();
      this.smsmodel.type = 'jg';
      this.smsmodel.value = this.smsjg;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);

      this.reset();
      this.smsmodel.type = 'bq';
      this.smsmodel.value = this.smsbq;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);

      this.reset();
      this.smsmodel.type = 'nr';
      this.smsmodel.value = this.smscontent;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);

      this.reset();
      this.smsmodel.type = 'tp1';
      this.smsmodel.value = this.smsimage;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.urlLx = this.urllx;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);


      this.reset();
      this.smsmodel.type = 'bttitle';
      this.smsmodel.value = this.titlebt;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);


      this.reset();
      this.smsmodel.type = 'bturl';
      this.smsmodel.value = this.bturl;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);

      this.reset();
      this.smsmodel.type = 'bttitle1';
      this.smsmodel.value = this.titlebt1;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);


      this.reset();
      this.smsmodel.type = 'bturl1';
      this.smsmodel.value = this.bturl1;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.tablelist.push(this.smsmodel);

      //轮播图数据  
      this.reset();
      this.smsmodel.type = 'lbimage';
      this.smsmodel.value = this.bturl1;
      this.smsmodel.tmId = this.tmId;
      this.smsmodel.cardId = this.queryParams.cardId;
      this.smsmodel.lbimage = this.lbimage;
      this.tablelist.push(this.smsmodel);


      var json = JSON.stringify(this.tablelist);
      this.tablejson.other5 = json;
      this.tablejson.other4 = this.finfo;
      //  console.log(this.tablejson)
      getmore(this.tablejson).then(response => {
        this.showshbt = true;
        this.$modal.msgSuccess("修改成功");
      });
    },
    //审核
    submitFormSh() {
      //判断选中类型
      let tmid = this.tmId;
      let fio = this.finfo;
      let vurl = window.location.origin + this.baseUrl;
      this.$modal.confirm('是否提交当前模版进行审核？').then(function () {
        return updateSmsTemplateMmsSh(tmid, fio, "1", vurl);
      }).then(() => {

        this.$modal.msgSuccess("提交成功成功");
      }).catch(() => { });
    },
    reset() {
      this.smsmodel = {
        type: null,
        value: null,
        tmId: null,
        cardId: null,
        urlLx: null,
        lbimage: [],
      }
    },
  }
};
</script>
<style>
.hbimage {
  background-image: url('~@/assets/images/hb.png')
}

.manufacturer-icons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.manufacturer-icon {
  width: 25px !important;
  height: 25px !important;
}

.top-class {
  margin-left: auto;
  margin-right: auto;
  width: 342px;
  height: 42px;
}
</style>

<style>
/* 左侧 */
.left-panel {
  position: relative;
  width: 256px;
  height: 100%;
  box-sizing: border-box;
  z-index: 2;
  overflow: hidden;

}


.component-panel {
  position: relative;
  width: 256px;
}

.component-panel .suit-list {
  width: 256px;
  padding: 8px 4px 0;
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100vh - 120px);
  background-color: #fff;
}

.component-panel .suit-list .suite-item-action {
  /* border: 1px solid #09f; */
}

.component-panel .suit-list .suit-title {
  position: relative;
  padding-left: 10px;
  line-height: 22px;
  font-weight: 700;
  font-size: 14px;
}

.component-panel .suit-list .suite-item {
  width: 46%;
  height: 160px;
  float: left;
  background: #f8f8fa;
  cursor: pointer;
  /* border: 1px solid #f2f2f3; */
  transition: all .5s;
  opacity: 1;
  margin-left: 7px;
  margin-bottom: 10px;
}

.component-panel .suit-list .suite-item .suite-item-content {
  margin: 8px auto;
  width: 100px;
  height: 120px;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}

.card-content {
  height: 100%;
  overflow: hidden;
}

.component-panel .suit-list .suite-item .suite-item-title {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #595961;
  opacity: 1;
  pointer-events: none;
}

.card-content .transform {
  transform-origin: left top;
}

.card-content .wrapper {
  overflow: hidden;
  position: absolute;
}
</style>

<style>
.flex-container {
  display: flex;
  margin-top: 15px;
  justify-content: space-between;
  /* 水平居中其他两个div */
}

.center-div {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  /* 水平居中第二个div */
}
</style>
 